<template>
    <div>
        <app-header/>
        <!-- 左侧导航区域 -->
        <app-navbar/>
        <!-- 右侧主区域 -->
        <app-main/>
    </div>
</template>
<script>
// 1. 导入子组件
import AppHeader from './AppHeader'
import AppNavbar from './AppNavbar'
import AppMain from './AppMain'
export default {
    // 2. 注册为子组件
    components: {AppHeader, AppNavbar, AppMain}

}
</script>
<style scope>
    /* 头部区域 */
    .header {
    position: absolute;
    line-height: 51px;
    padding: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #2d3a4b;
    }
    /* 左侧导航栏 */
    .navbar {
    position: absolute;
    width: 230px;
    top: 50px;
    left: 0px;
    bottom: 0px;
    overflow-y: auto;
    background-color: #545c64;
    }
    /* 右侧主区域 */
    .main {
    position: absolute;
    top: 50px;
    left: 230px;
    right: 0px;
    bottom: 0px;
    padding: 10px;
    overflow-y: auto;
    }
</style>